<template>
  <div class="container">
    <el-card shadow="never" style="margin-bottom: 10px">
      <el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel one" @click="dbClick(1)">
            <div class="card-panel-icon-wrapper icon-list">
              <svg-icon icon-class="gold" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">{{ $t('dashboard.totalSales') }}</div>
              <p>121</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel two" @click="dbClick(2)">
            <div class="card-panel-icon-wrapper icon-list">
              <svg-icon icon-class="stockSetUp" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">{{ $t('dashboard.quantityShipped') }}</div>
              <p>2121</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel three" @click="dbClick(3)">
            <div class="card-panel-icon-wrapper icon-list">
              <svg-icon icon-class="cyicon" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">{{ $t('dashboard.groupSize') }}</div>
              <p>2121</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel four" @click="dbClick(4)">
            <div class="card-panel-icon-wrapper icon-list">
              <svg-icon icon-class="goods" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">{{ $t('dashboard.orderQuantity') }}</div>
              <p>12121</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 折线图 -->
    <el-row>
      <el-col :span="12">
        <el-card shadow="never" class="shadow_contant" style="margin-bottom: 10px;margin-right: 5px;">
          <div class="chart">
            <line-chart v-if="showChart" :chart-data="chartData" :x-chart-data="xActualData0"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="shadow_contant">
          <user-chart/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card shadow="never" class="shadow_contant2" style="margin-bottom: 10px;margin-right: 5px;">
          <div class="chart">
            <china-map/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="shadow_contant2" style="margin-bottom: 10px;">
          <el-tabs id="card" type="border-card">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-s-shop"/>热销商品</span>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                max-height="250">
                <el-table-column
                  type="index"
                  label="排名"
                  width="50"/>
                <el-table-column
                  prop="name"
                  label="商品名称"
                  width="180"/>
                <el-table-column
                  prop="spec"
                  label="规格"
                  width="180"/>
                <el-table-column
                  prop="num"
                  label="销售数量"
                  width="180"/>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="最新上架">
              <el-table
                :data="tableData2"
                border
                style="width: 100%"
                max-height="250">
                <el-table-column
                  type="index"
                  label="排名"
                  width="50"/>
                <el-table-column
                  prop="name"
                  label="商品名称"
                  width="180"/>
                <el-table-column
                  prop="spec"
                  label="规格"
                  width="180"/>
                <el-table-column
                  prop="time"
                  label="上架时间"
                  width="180"/>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import lineChart from '../../components/Chart/lineChart'
import userChart from './components/user'
import chinaMap from './components/ChinaMap'
import { chartData } from '@/api/chart'
export default {
  name: 'Dashboard',
  components: { lineChart, userChart, chinaMap },
  data() {
    return {
      yActualData0: { // 模拟数据
        newVisitis: {
          buyerData: [100, 120, 161, 134, 105, 160, 165],
          payData: [120, 82, 91, 154, 162, 140, 145],
          refData: [130, 182, 191, 254, 262, 240, 245],
          refData2: [10, 12, 19, 25, 26, 20, 25]
        }
      },
      xActualData0: [], // 横坐标数据
      chartData: {}, // 请求数据之后的折线图数据
      showChart: true,
      tableData: [
        {
          name: '商品名称01',
          spec: '220g/袋',
          num: '1243324324'
        },
        {
          name: '商品名称02',
          spec: '120g/袋',
          num: '54543543'
        },
        {
          name: '商品名称03',
          spec: '320g/袋',
          num: '4324'
        },
        {
          name: '商品名称04',
          spec: '140g/袋',
          num: '13434'
        }
      ],
      tableData2: [
        {
          name: '上架商品名称01',
          spec: '220g/袋',
          time: '2020-04-21'
        },
        {
          name: '上架商品名称02',
          spec: '230g/袋',
          time: '2020-04-22'
        },
        {
          name: '上架商品名称03',
          spec: '90g/袋',
          time: '2020-04-23'
        },
        {
          name: '上架商品名称04',
          spec: '67g/袋',
          time: '2020-04-24'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'foles'
    ])
  },
  created() {
    // 组件通信bus触发leftNavClick事件
    this.$bus.on('changeLan', (command) => {
      if (command) {
        // window.location.reload()
        this.showChart = false
        setTimeout(() => {
          this.showChart = true
        }, 1)
      }
    })
    this.getWeek()
    this.dbClick()
  },
  methods: {
    // 获取当前周
    getWeek() {
      const dateOfToday = Date.now()
      const dayOfToday = (new Date().getDay() + 7 - 1) % 7
      const daysOfThisWeek = Array.from(new Array(7)).map((_, i) => {
        const date = new Date(dateOfToday + (i - dayOfToday) * 1000 * 60 * 60 * 24)
        return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0')
      })
      this.xActualData0 = daysOfThisWeek
    },
    // 点击切换折线图
    dbClick(num = 1) {
      const self = this
      var params = new URLSearchParams()
      chartData(params).then(res => {
        // console.log(res)
        if (res.code === 200) {
          if (num === 1) {
            self.chartData = res.result.dataOne
          } else if (num === 2) {
            self.chartData = res.result.dataTwo
          } else if (num === 3) {
            self.chartData = res.result.dataThree
          } else if (num === 4) {
            self.chartData = res.result.dataFour
          }
        } else {
          self.chartData = self.yActualData0.newVisitis
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  // padding: 20px;
  background-color: #eceff4;
  margin-bottom: 20px;
}
.container #card {
  box-shadow: none!important;
  border: none;
}
/deep/.el-tabs__header.is-top {
  float: right!important;
  border: 1px solid #E4E7ED;
  margin-bottom: 20px;
}
/deep/.el-tabs__content {
  display: block;
  float: left;
}
.panel-group {
  margin-top: 18px;
  margin-left: 1px!important;
  margin-right: 1px!important;
  .card-panel-col{
    margin-bottom: 16px;
  }
  .card-panel {
    height: 108px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #fff;
    cursor: pointer;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .10);
    border-color: rgba(0, 0, 0, .05);
    .icon-list {
      color: #fff;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 26px;
      margin-left: 14px;
      .card-panel-text {
        line-height: 18px;
        color: #fff;
        font-size: 16px;
        margin: 0 0 0 0px;
        margin-bottom: 12px;
      }
      .money {
        font-size: 20px;
        margin-left: -10px;
        float: left;
      }
      .card-panel-num {
        font-size: 20px;
        margin: 0 0 0 5px;
      }
      p{
        font-size: 20px;
      }
    }
  }
  .card-panel.one {
    background: url(../../assets/totalSales.png) no-repeat;
    background-size: 100% 100%;
  }
  .card-panel.two {
    background: url(../../assets/quantityShipped.png) no-repeat;
    background-size: 100% 100%;
  }
  .card-panel.three {
    background: url(../../assets/groupSize.png) no-repeat;
    background-size: 100% 100%;
  }
  .card-panel.four {
    background: url(../../assets/orderQuantity.png) no-repeat;
    background-size: 100% 100%;
  }
}
.chart {
  margin: 0 auto;
}
.shadow_contant {
  height: 350px;
}
.shadow_contant2 {
  height: 370px;
}
</style>
